<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <h1>{{name}}</h1>
        <h2>{{msg}}</h2>
        <h3>{{flag?answerY:answerN}}</h3>
    </div>
    <div>
        <h1>{{name}}</h1>
    </div>
    <div class="box2">
        <h1>{{msg}}</h1>
    </div>
    <div class="box3">
        <h1>{{name}}</h1>
        <h2>{{obj.name}}</h2>
    </div>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                name:'豆豆',
                msg:'打豆豆了吗？',
                flag:true,
                answerY:'打了',
                answerN:'没打'
            }
        })
        console.log(vm);
        vm.name = '一个苹果';
        console.log(vm);
        let data = {
            msg:'xxx'
        }
        let vm2 = new Vue({
            el:'.box2',
            data
        })
        vm2.msg = '666'
        let obj = {
                    name:'tom',
                    age:18
                };
        Object.freeze(obj);
        let vm3 = new Vue({
            el:'.box3',
            data:{
                obj,
                name:'jack'
            }
        })
        console.log(vm3);
        vm3.name = 'rose';
        vm3.obj.name = 'text';        
    </script>
</body>
</html>